<template>
    <div>
        <div class="menu-item">
            <ul>
            <li @click="menuClick($event,'/medical_record_list')"><a href="javascript:;">历史病历</a></li>
            <li @click="menuClick($event,'/drugs_list')" ><a href="javascript:;">药品信息</a></li>
            <li @click="menuClick($event,'/patientInfo')"><a href="javascript:;">病人信息</a></li>
            </ul>
        </div>
        <!-- <div class="menu-item">
            <p class="title" @click="patientShow=!patientShow"><a href="javascript:;">病人信息查询</a></p>
            <ul class="patient" v-show="patientShow">
                <li @click="menuClick($event,'/')"><a href="javascript:;">病人信息</a></li>
                <li @click="menuClick($event,'/medical_record_list')"><a href="javascript:;">历史病历</a></li>
                <li @click="menuClick($event,'/treat_record_list')"><a href="javascript:;">看病记录</a></li>
            </ul>
        </div> -->
        <!-- <div class="menu-item">
            <p class="title" @click="registerShow=!registerShow"><a href="javascript:;">挂号信息</a></p>
            <ul class="patient" v-show="registerShow">
                <li @click="menuClick($event,'/')"><a href="javascript:;">未诊挂号</a></li>
                <li @click="menuClick($event,'/')"><a href="javascript:;">已诊挂号</a></li>
            </ul>
        </div> -->
        <!-- <div class="menu-item">
            <p class="title" @click="drugsShow=!drugsShow"><a href="javascript:;">药品查询</a></p>
            <ul class="patient" v-show="drugsShow">
                <li @click="menuClick($event,'/drugs_list')" ><a href="javascript:;">药品信息</a></li>
            </ul>
        </div> -->
    </div>
</template>

<script>

export default {
    
    data(){
        return{
            activeMenu_el:null,
            patientShow:true,
            registerShow:false,
            drugsShow:false,
        }
    },
    methods:{
        menuClick(el,path){
            // 获取当前点击的菜单元素，然后设置样式
            this.activeMenu_el=el.currentTarget
            // this.$store.state.global_var.activeMenu_el=el.currentTarget
            let old_el=document.querySelectorAll(".active")
            if(old_el.length>0){old_el[0].setAttribute("class","")}
            setTimeout(()=>{
                this.activeMenu_el.setAttribute("class","active")
            })
            this.$router.push(path)
        }
    },
    mounted(){
        // this.activeMenu_el = this.$store.state.global_var.activeMenu_el
        // if(this.$store.state.global_var.activeMenu_el){
        //     this.$store.state.global_var.activeMenu_el.setAttribute("class","active")
        // }
        
    }
}
</script>

<style lang='scss' scoped>
a{
    color: black;
}
// a:active{
//     background-color: pink;
// }
.menu-item{
    margin-bottom:10px;
}
.title{
    font-weight: bolder;
}
ul{
    li{
        margin:5px auto 0px 10px;
        width: 80%;
        a:hover{
            font-size: 16px;
            font-weight: bolder;
        }
    }
    .active{
        background-color: rgb(214, 214, 214);
        font-size: 16px;
        font-weight: bolder;
    }
}
</style>